<!DOCTYPE html>
<html>
<head>
    <title>上传文件-跨省业务协调用</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="/webjars/miniui/boot.js" type="text/javascript"></script>
    <script src="/static/js/common/common.js" type="text/javascript"></script>
    <link href="/webjars/miniui/css/demo.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
    <br>
    <form id="FileuploadForm" style="width:800px">

        <input name="id" class="mini-hidden" value="${id!''}" />
        <input name="priNum" class="mini-hidden" value="${priNum!''}" />
        <input name="taskId" class="mini-hidden" value="${taskId!''}" />
        &nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;
        <#if level == "01">
            <a class="mini-button" id="btnUpload" onclick="upload()">上传文件</a>&nbsp;&nbsp;
        </#if>
        <a class="mini-button" id="btnUpload" onclick="downloadFiles()" align="right"> 一键下载</a>
        <div id="msg"></div>
    </form>
</div>
<!--进度条部分(默认隐藏)-->
<div style="height: 35px;width: 100%">
    <div style="display: none;" class="progress-body">
        <div>
            <span style="width: 80px; display: inline-block; text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;上传速度:</span>
            <span style="width: 300px;" class="progress-speed">0 M/S, 0/0M</span>
            <span style="width: 100px; display: inline-block; text-align: right">上传状态:</span>
            <span style="width: 300px;" class="progress-info">请选择文件并点击上传文件按钮</span>
        </div>
    </div>
</div>
<div style="height: 60%;width: 100%">
    <div id="datagrid1" class="mini-datagrid" style="width: 100%; height: 100%;" ajaxType="get"
         showPager="false" idField="id" url="/upload/selectAppendixFile/all?taskId=${taskId!''}&priNum=${priNum!''}&id=${id!''}">
        <input name="total" class="mini-hidden" />
        <input name="id" class="mini-hidden" />
        <input name="instid" class="mini-hidden" />
        <input name="flowid" class="mini-hidden" />
        <input name="flowVersion" class="mini-hidden" />
        <input name="fileurl" class="mini-hidden" />
        <div property="columns">
            <div name="fileName" field="fileName" align="center" headerAlign="center" allowSort="false">文件名称</div>
            <div name="uploadDate" field="uploadDate" align="center" headerAlign="center" dateFormat="yyyy-MM-dd" class="mini-datepicker"
                 allowSort="false">上传时间
            </div>
            <div name="userName" field="userName" align="center" headerAlign="center" allowSort="false">上传人</div>
            <div name="action" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;"
                 allowSort="false" multiSelect="false">操作
            </div>
        </div>
    </div>
</div>

<script>
    mini.parse();
    var grid = mini.get("datagrid1");
    grid.load();

    //渲染列中按钮
    function onActionRenderer(e) {
        var level = ${level!''};
        var s = '';
        s += '&nbsp;<a class="mini-button mini-button-success"   href="javascript:downloadFile()" >&nbsp;&nbsp;下载&nbsp;&nbsp;</a>&nbsp';
        return s;
    }

    function callback() {
        grid.reload();
    }

    function downloadFile() {
        var row = grid.getSelected();
        if (row) {
            top.location.href = encodeURI("/upload/downloadAppendixFile?fileUrl=" + row.fileUrl);
        } else {
            mini.alert("请选中一条记录");
        }
    }

    function downloadFiles() {
        var a = grid.getData();
        var data = mini.encode(a);
        if (a.length <= 0) {
            mini.alert("无文件可下载");
            return;
        }
        top.location.href = encodeURI("/upload/downloadAppendixFile/all?data=" + data);
    }

    // 上传文件
    function upload() {
        $("#msg").text("");
        var checkFile = $("#uploadFile").val();
        if (null == checkFile || "" == checkFile) {
            $("#msg").text("文件为空,请选择文件!");
        } else {
            var formData = new FormData(document.getElementById("FileuploadForm"));
            $.ajax({
                type: "POST",
                enctype: 'multipart/form-data',
                url: '/upload/uploadAppendixFile/save',
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                dataType: "json",
                error: function (result) {
                    flag = false;
                    $("#msg").text("访问服务器错误，请重试！");
                },
                success: function (result) {
                    grid.reload();
                },
                xhr: function () {
                    var xhr = $.ajaxSettings.xhr();
                    if (xhr.upload) {
                        $("#btnUpload").attr("disabled", true);
                        $("#uploadFile").attr("disabled", true);
                        //处理进度条的事件
                        xhr.upload.addEventListener("progress", progressHandle, false);
                        //加载完成的事件
                        xhr.addEventListener("load", completeHandle, false);
                        //加载出错的事件
                        xhr.addEventListener("error", failedHandle, false);
                        //加载取消的事件
                        xhr.addEventListener("abort", canceledHandle, false);
                        //开始显示进度条
                        showProgress();
                        return xhr;
                    }
                }
            }, 'json');
        }
    }

    var start = 0;
    //显示进度条的函数
    function showProgress() {
        start = new Date().getTime();
        $(".progress-body").css("display", "block");
    }

    //隐藏进度条的函数
    function hideProgress() {
        $("#uploadFile").val('');
        $('.progress-body .progress-speed').html("0 M/S, 0/0M");
        $('.progress-body .progress-info').html("请选择文件并点击上传文件按钮");
        $("#btnUpload").attr("disabled", false);
        $("#uploadFile").attr("disabled", false);
    }

    //进度条更新
    function progressHandle(e) {
        $('.progress-body progress').attr({value: e.loaded, max: e.total});
        var percent = e.loaded / e.total * 100;
        var time = ((new Date().getTime() - start) / 1000).toFixed(3);
        if (time == 0) {
            time = 1;
        }
        $('.progress-body .progress-speed').html(((e.loaded / 1024) / 1024 / time).toFixed(2) + "M/S, " + ((e.loaded / 1024) / 1024).toFixed(2) + "/" + ((e.total / 1024) / 1024).toFixed(2) + " MB. ");
        $('.progress-body percentage').html(percent.toFixed(2) + "%");
        if (percent == 100) {
            $('.progress-body .progress-info').html("上传完成,后台正在处理...");
        } else {
            $('.progress-body .progress-info').html("文件上传中...");
        }
    }

    //上传完成处理函数
    function completeHandle(e) {
        $('.progress-body .progress-info').html("上传文件完成。");
        setTimeout(hideProgress, 2000);
    }

    //上传出错处理函数
    function failedHandle(e) {
        $('.progress-body .progress-info').html("上传文件出错, 服务不可用或文件过大。");
        setTimeout(hideProgress, 2000);
    }

    //上传取消处理函数
    function canceledHandle(e) {
        $('.progress-body .progress-info').html("上传文件取消。");
        setTimeout(hideProgress, 2000);
    }
</script>
</body>
</html>